<template>
	<page-meta :page-style="show ? 'overflow: hidden; touch-action: none;' : ''">
	</page-meta>
	<view class="container">
		<u-popup :show="show" @close="close" mode="bottom" :duration="100" :closeOnClickOverlay="false" round="30rpx">
			<view class="honey-tip-container">
				<!-- 标题 -->
				<view class="title">自定义蜂蜜</view>

				<!-- 打赏数量提示 -->
				<view class="tip-info">
					<span class="tip-label">打赏数量</span>
					<span class="tip-min">最低可打赏1 蜂蜜</span>
				</view>

				<!-- 输入显示区域 -->
				<view class="input-display">
					<view class="input-value">{{ displayValue }}</view>
					<view class="input-unit">蜂蜜</view>
				</view>
				

				<!-- 数字键盘 - 左右布局 -->
				<view class="number-keyboard">
					<!-- 数字键盘左侧 -->
					<view class="keyboard-left">
						<!-- 第一行：1 2 3 -->
						<view class="keyboard-row">
							<view class="keyboard-key" @click="handleNumberInput(1)">1</view>
							<view class="keyboard-key" @click="handleNumberInput(2)">2</view>
							<view class="keyboard-key" @click="handleNumberInput(3)">3</view>
						</view>

						<!-- 第二行：4 5 6 -->
						<view class="keyboard-row">
							<view class="keyboard-key" @click="handleNumberInput(4)">4</view>
							<view class="keyboard-key" @click="handleNumberInput(5)">5</view>
							<view class="keyboard-key" @click="handleNumberInput(6)">6</view>
						</view>

						<!-- 第三行：7 8 9 -->
						<view class="keyboard-row">
							<view class="keyboard-key" @click="handleNumberInput(7)">7</view>
							<view class="keyboard-key" @click="handleNumberInput(8)">8</view>
							<view class="keyboard-key" @click="handleNumberInput(9)">9</view>
						</view>

						<!-- 第四行：0 -->
						<view class="keyboard-row">
							<view class="keyboard-key zero-key" @click="handleNumberInput(0)">0</view>
						</view>
					</view>

					<!-- 数字键盘右侧 -->
					<view class="keyboard-right">
						<!-- 删除按钮 -->
						<view class="delete-btn" @click="handleDelete">
							<text class="delete-icon">×</text>
						</view>

						<!-- 确定按钮 -->
						<view class="confirm-btn" @click="handleConfirm">确定</view>
					</view>
				</view>

				<view class="footer-btn-top">
					<!-- 协议勾选 -->
					<view class="agreement">
						<label class="checkbox-wrapper" @click="toggleCheckbox">
							<view class="custom-checkbox" :class="{ 'checked': selected }">
								<u-icon v-if="selected" name="checkmark" color="#fff" size="12"></u-icon>
							</view>
							<text>我已阅读并同意
								<text class="protocol" @click.stop="onProtocol">《蜂蜜值用户协议》</text>
							</text>
						</label>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {} from '@/request/api.js';
	export default {
		name: "customize",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			show: {
				handler(newVal) {
					if (newVal) {
						// 显示时重置数据
						this.inputValue = '';
						this.agreementChecked = false;
					}
				}
			}
		},
		data() {
			return {
				inputValue: '',
				selected: false,
			}
		},
		created() {

		},
		methods: {
			close() {
				this.$emit('close');
			},
			handleNumberInput(num) {
				// 处理首位0的问题
				if (this.inputValue === '0') {
					this.inputValue = num.toString();
				} else if (this.inputValue.length < 4) { // 限制最大输入4位数
					this.inputValue += num.toString();
				}
			},
			handleDelete() {
				if (this.inputValue.length > 0) {
					this.inputValue = this.inputValue.slice(0, -1);
					// 如果删除后为空，设为'0'
					if (this.inputValue === '') {
						this.inputValue = '0';
					}
				}
			},
			handleConfirm() {
				// 确保输入值至少为1
				const value = parseInt(this.inputValue);
				if (this.inputValue && value >= 1) {
					if (this.agreementChecked) {
						// 执行确认逻辑
						console.log('确认打赏:', this.inputValue, '蜂蜜');
						// 这里可以添加提交打赏的逻辑
						this.close();
					} else {
						uni.showToast({
							title: '请先阅读并同意协议',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '请输入有效的打赏数量（至少1蜂蜜）',
						icon: 'none'
					});
				}
			},
			// 切换复选框状态
			toggleCheckbox() {
				this.selected = !this.selected;
			},
		},
		computed: {
			displayValue() {
				return this.inputValue || '0';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		.honey-tip-container {
			padding: 40rpx 30rpx;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0;
			min-height: 836rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.tip-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
		}

		.tip-label {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}

		.tip-min {
			font-size: 28rpx;
			color: #999;
		}

		/* 输入显示区域 */
		.input-display {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f8f8;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 40rpx;
		}

		.input-value {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-right: 10rpx;
		}

		.input-unit {
			font-size: 32rpx;
			color: #666;
		}

		/* 数字键盘 - 左右布局 */
		.number-keyboard {
			display: flex;
			gap: 20rpx;
			margin-bottom: 40rpx;
		}

		.keyboard-left {
			flex: 3;
		}

		.keyboard-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
		}

		.keyboard-row {
			display: flex;
			margin-bottom: 20rpx;
			gap: 20rpx;
		}

		.keyboard-row:last-child {
			margin-bottom: 0;
		}

		.keyboard-key {
			flex: 1;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f5f5f5;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			cursor: pointer;
			user-select: none;
			transition: all 0.2s ease;
		}

		.keyboard-key:active {
			background: #e8e8e8;
			transform: scale(0.98);
		}

		/* 0键样式 - 占据3个位置 */
		.zero-key {
			flex: 3;
		}

		/* 删除按钮 */
		.delete-btn {
			background: #fff;
			color: #666;
			border: 2rpx solid #e0e0e0;
			height: 80rpx; /* 与第一行123高度一致 */
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			font-size: 32rpx;
			cursor: pointer;
			user-select: none;
			transition: all 0.2s ease;
		}
		
		.delete-btn:active {
			background: #f0f0f0;
		}
		
		.delete-icon {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		/* 确定按钮 - 高度为后面三行的高度 */
		.confirm-btn {
			background: #ffb327;
			color: #fff;
			font-weight: bold;
			flex: 1;
			height: calc(80rpx * 3 + 20rpx * 2); /* 与第2、3、4行对齐: 3个按钮高度 + 2个间隔 */
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			font-size: 32rpx;
			cursor: pointer;
			user-select: none;
			transition: all 0.2s ease;
		}

		.confirm-btn:active {
			background: #ffa000;
		}





		/* 响应式设计 */
		@media (max-width: 480px) {
			.honey-tip-container {
				margin: 0;
				padding: 30rpx 20rpx;
			}

			.keyboard-key,

			.delete-btn {
				height: 90rpx;
				/* 与小屏幕下的第一行对齐 */
				font-size: 28rpx;
			}

			.confirm-btn {
				height: calc(70rpx * 3 + 15rpx * 2);
				/* 与小屏幕下的后三行对齐 */
				font-size: 28rpx;
			}

			.keyboard-row {
				gap: 15rpx;
				margin-bottom: 15rpx;
			}

			.keyboard-row:last-child {
				margin-bottom: 0;
			}

			.number-keyboard {
				gap: 15rpx;
			}

			.keyboard-right {
				gap: 15rpx;
			}
		}

		.footer-btn-top {
			width: calc(100% - 80rpx);
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, -20%);
			text-align: center;
			color: #fff;
			padding: 40rpx;

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;

				.checkbox-wrapper {
					display: flex;
					align-items: center;
					cursor: pointer;
				}

				.custom-checkbox {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 16rpx;
					background-color: #fff;
					transition: all 0.3s ease;

					&.checked {
						background-color: rgba(255, 179, 39, 1);
						border-color: rgba(255, 179, 39, 1);
					}
				}

				.protocol {
					color: rgba(255, 179, 39, 1);
				}
			}

			.agreement text {
				font-size: 24rpx;
				color: rgba(120, 120, 130, 1);
			}

		}
	}
</style>